
<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <title>聊天</title>

    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="css/face.css"/>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<img class="abs cover body-bg" width="100%" height="100%">
<div class="abs cover contaniner">
    <div class="abs cover pnl">
        <div class="abs top pnl-head" id="pnlHead">
            <div class="pnl-hl" id="userInfo" style="color: white;line-height: 3rem">客户服务</div>
            <div class="pnl-about" id="pnlAbout" style="width: 20rem;color: white;">

                <span id="myInfo">我是客服</span>


            </div>
            <div class="pnl-opt pnl-esc" id="exit"><i class="kh">&#xe802;</i></div>
            <div class="pnl-opt pnl-min" id="min"><i class="kh">&#xe813;</i></div>
            <div class="pnl-opt pnl-max" id="max"><i class="kh">&#xe814;</i></div>
            <div class="pnl-opt pnl-voice" id="voicebtn"><i class="kh" id="voice">&#xE801;</i></div>
        </div>

        <div class="abs cover pnl-body" id="pnlBody">
            <div class="abs cover pnl-left">
                <div class="abs cover pnl-msgs scroll" id="show">
                    <div class="msg-banner banner-hide hide">
                        <div class="close"><i class="kh">&#xe824;</i></div>
                        <div class="banner">消息公告</div>
                    </div>
                    <div class="msg min time" id="histStart">加载历史消息</div>
                    <div class="pnl-list" id="hists">
                        <!-- 历史消息 -->
                    </div>
                    <!--<div class="pnl-list" id="msgs">-->
                        <!--<div class="msg robot" id="welcome">-->
                            <!--<div class="msg-left" id="welcomeLeft" worker="小五">-->
                                <!--<div class="msg-host photo" id="welcomeIcon" style="background-image: url(&quot;https://www.v5kf.com/files/icons/201610/14761555537.png&quot;);"></div>-->
                                <!--<div class="msg-ball" id="welcomeBall"><span>Hi，我是机器人客服小五，您对我们的系统和业务有哪些疑问呢？我能帮您快速解答：）</span></div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="msg guest" id="1543389702033-0">-->
                            <!--<div class="msg-right" customer="游客">-->
                                <!--<div class="msg-host"><i class="ic kh"></i></div>-->
                                <!--<div class="msg-ball" title="今天 15:38:29">66</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="msg robot" id="110480208292742116">-->
                            <!--<div class="msg-left" worker="小五">-->
                                <!--<div class="msg-host photo" title="小五" style="background-image: url(&quot;https://www.v5kf.com/files/icons/201610/14761555537.png&quot;);"></div>-->
                                <!--<div class="msg-ball" title="今天 15:38:32">Hi，我是V5的机器人客服小五。在计算客服成本和省钱方面，我可是小专家，不甚自信地邀请您来考考我，可以吗？</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="pnl-list" id="msgs">-->
                    <!--<div class="msg robot hide" id="welcome">-->
                    <!--<div class="msg-left" id="welcomeLeft">-->
                    <!--<div class="msg-host" id="welcomeIcon"><i class="ic kh">&#xe803;</i></div>-->
                    <!--<div class="msg-ball" id="welcomeBall">连接...</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <div class="pnl-list hide" id="unreadLine">
                        <div class="msg min time unread">未读消息</div>
                    </div>
                    <!-- <div class="pnl-mask hide" id="msg-mask"></div> -->
                </div>
                <div class="abs bottom pnl-text">
                    <div class="abs bottom pnl-ext hide" id="pnlExt">
                        <div class="emoji-pnl scroll hide" id="emojiPnl">
                            <!-- <img class="emoji-item" key="/::<>" src="http://static.v5kf.com/images/emoji/qq/2009426203723341.gif" />
                            <img class="emoji-item" key="/::<>" src="http://static.v5kf.com/images/emoji/qq/2009426203723341.gif" /> -->
                        </div>
                    </div>
                    <div class="ques-pnl scroll hide" id="quesPnl">
                        <ul class="questions unselect" id="ques"></ul>
                    </div>
                    <div class="abs top pnl-warn" id="pnlWarn">
                        <a href="javascript:;" id="face">表情</a>
                        <span id="left"></span>
                        <!-- <div class="fl btns rel pnl-warn-free">
                            <i class="kh warn-btn emoji-btn" title="表情" id="emojiBtn">&#xe80E;</i>
                            <i class="kh warn-btn menu-btn" title="菜单" id="menuBtn">&#xe821;</i>
                            <i class="kh warn-btn send-btn" style="display:none;" title="发送" id="sendBtn">&#xe839;</i>
                            <i class="kh warn-btn mute-btn" title="静音" id="muteBtn">&#xe801;</i>
                        </div>
                        <div class="fl btns rel pnl-warn-left" id="pnlBtns">
                            <div class="pnl-warn-btns">
                                <i class="kh warn-btn" title="常见问题" id="quesBtn">&#xe811;</i>
                                <i class="kh warn-btn" title="图片上传" id="uploadBtn">&#xe810;</i>
                                <i class="kh warn-btn" style="display:none;" title="视频" id="videoBtn">&#xe840;</i>
                                <i class="kh warn-btn" style="display:none;" title="语音" id="voiceBtn">&#xe841;</i>
                                <i class="kh warn-btn" style="display:none;" title="拍照上传" id="cameraBtn">&#xe827;</i>
                                <i class="kh warn-btn" title="截图提示" id="scrshot">&#xe819;</i>
                                <i class="kh warn-btn" title="评价" id="evalBtn">&#xe809;</i>
                                <i class="kh warn-btn" title="我要留言" id="msgBtn">&#xe807;</i>
                                <i class="kh warn-btn" title="提示音" id="voiceMbBtn">&#xe801;</i>
                                <i class="kh warn-btn" title="转人工" id="humanBtn">&#xe80a;</i>
                            </div>
                            <div class="pnl-support-sm" id="copyrightSm"><a>V5KF提供服务支持</a></div>
                        </div> -->
                        <div class="fl right pnl-warn-right">
                            <span class="sess-status" id="sessStatus"><!-- 机器人小五 <small>为您服务</small> --></span>
                            <!-- <i class="kh" kh-warn>&#xe80b;</i> --><span id="val-left" style="display:none;">您还可以输入<span id="valleft">450</span>字</span>
                        </div>
                    </div>
                    <div class="abs cover pnl-input">
                        <textarea class="scroll" id="text" wrap="hard" placeholder="在此输入..."></textarea>
                        <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                            <ul class="atcom" id="atcom">
                                <!-- <li class="atcom-item">这是一个问题？</li> -->
                            </ul>
                        </div>
                    </div>
                    <div class="abs br pnl-btn" id="submit" onclick="sendMsg()">发送</div>
                    <div class="abs cover input-mask hide" id="recon">
                        <div class="recon-tip" id="distype">
                            <span id="closeTip">因长时间未活动会话已关闭</span>，您可以<i id="refresh"> 刷新 </i>或<i id="startChat"> 继续对话 </i>
                        </div>
                    </div>
                    <div class="pnl-support" id="copyright"><a>DH</a></div>
                </div>


            </div>
            <div class="abs right pnl-right">
                <!-- 轮播图 hide控制显隐 20em * 10em (260px * 130px) -->
                <!-- <ul class="slider">
                        <li class="slider-item slider-item1"></li>
                        <li class="slider-item slider-item2"></li>
                        <li class="slider-item slider-item3"></li>
                        <li class="slider-item slider-item4"></li>
                        <li class="slider-item slider-item5"></li>
                    </ul>
                    <ul class="indicator">
                        <li><div class="focus-item focus-item1"></div></li>
                        <li><div class="focus-item focus-item2"></div></li>
                        <li><div class="focus-item focus-item3"></div></li>
                        <li><div class="focus-item focus-item4"></div></li>
                        <li><div class="focus-item focus-item5"></div></li>
                    </ul> -->
                <div class="slider-container hide"></div>
                <div class="pnl-right-content">
                    <div class="pnl-tabs">
                        <div class="tab-btn active" id="hot-tab">会话列表</div>
                        <!--  <div class="tab-btn" id="rel-tab">相关问题</div> -->
                    </div>
                    <div class="pnl-hot">
                        <ul class="rel-list unselect" id="hots">
                            <li class="rel-item">小红</li>
                        </ul>
                    </div>
                    <div class="pnl-rel" style="display: none;">
                        <ul class="rel-list unselect" id="rels">
                            <!-- <li class="rel-item">这是一个问题，这是一个问题？</li> -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="js/ws_guest_chat.js"></script>
<script src="jquery.qqface.min.js"></script>
<script src="js/face.js"></script>
<script src="js/paste-upload-image.js"></script>
<script>
    $("#text").pasteUploadImage("http://swoole.upload.guardevil.cn/upload.php");
</script>
</body>
</html>